<template>
  <el-container class="h-100" v-loading="loading">
    <el-header class="shadow-sm d-flex justify-content-center bg-white" style="height: 80px;">
      <div class="w-100" style="line-height: 80px;">
        <h5 class="d-inline">外业总体进度监管</h5>
        <div class="float-right">
          <el-select @change="changedSearch" placeholder="请选择" v-model="value" class="my-2" size="small">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-button type="primary" class="ml-3" @click="exportExcel" size="small">报表导出<i class="el-icon-download"></i></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="m-2 bg-white">
      <el-table :data="datas" style="width: 100%">
        <el-table-column prop="date" label="序号" width="60" align="center" type="index">
        </el-table-column>
        <el-table-column prop="cityName" label="地市" align="center">
        </el-table-column>
        <el-table-column prop="areaName" label="区县" align="center">
        </el-table-column>
        <el-table-column prop="areaYJZ" :label="value === 'Wyhc' ? '外业已举证' : '县级已举证'" align="center">
        </el-table-column>
        <el-table-column prop="areaYSB" label="县级已上报" align="center" v-if="value !== 'Wyhc'">
        </el-table-column>
        <el-table-column prop="cityYSB" label="市级已上报" align="center" v-if="value !== 'Wyhc'">
        </el-table-column>
        <el-table-column prop="pass" label="省级通过" align="center">
        </el-table-column>
        <el-table-column prop="fail" label="省级不通过" align="center">
        </el-table-column>
        <el-table-column label="省级通过率" align="center">
          <template slot-scope="scope">
            {{percent(scope.row.passRate)}}
          </template>
        </el-table-column>
        <el-table-column label="省级不通过率" align="center">
          <template slot-scope="scope">
            {{percent(scope.row.failRate)}}
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>
<script>
// import getDatas from '../common/ctiyCountyDatas'

export default {
  name: "overall-progress",
  title: "总体进度",
  data() {
    return {
      loading: false,
      value: "Ccjz",
      options: [
        {
          value: "Ccjz",
          label: "初次举证"
        },
        {
          value: "Dlyb",
          label: "地类样本"
        },
        // {
        //   value: "Cxjz",
        //   label: "重新举证"
        // },
        {
          value: "Wyhc",
          label: "外业核查"
        },
        {
          value: "Bcjz",
          label: "补充举证"
        },
      ],
      datas: [],
      // citys: [],
      // city: {}
    };
  },
  mounted() {
    this.changedSearch()
    // this.getCtiy(this.url)
  },
  methods: {
    changedSearch() {
      this.loading = true;
      let url = "analysis/spot/getOverallProgressDataByCcjz"
      if (this.value === 'Dlyb') {
        url = 'analysis/spot/getOverallProgressDataByDlyb'
      } else if (this.value === 'Wyhc') {
        url = 'analysis/hc/spot/getOverallProgressDataByZxjz'
      } else if (this.value === 'Bcjz') {
        url = 'analysis/bc/spot/getOverallProgressDataByCcjz'
      }
      this.$get(url).then(res => {
        this.datas = res.data.data
      }).finally(() => this.loading = false);
    },
    // getCtiy () {
    //   getDatas(this, 'survey/areaInfo/getCityInfo').then((citys) => {
    //     this.citys = citys
    //     this.city = this.citys[0]
    //   })
    // },
    percent(num) {
      return (num * 100).toFixed(2) + '%'
    },
    exportExcel() {
      this.$exportExcel(`analysis/downExcel/downOverallProgressDataBy${this.value}Excel?oauth=${this.$store.state.user.user.oauth}`)
    }
  }
};
</script>